Web Vitals - Largest Contentful Paint(LCP)

개요

Largest Contentful Paint지표는 페이지가 불러와지는 시점부터 현재 브라우저 화면에 보이는 가장 큰 이미지나 텍스트가 그려지기 까지의 시간을 측정한다. (i.e 로딩 시간)

LCP 가 발생했을 때는 주로 주요 컨텐츠가 로딩된 시점이기 때문에 빠를 수록 유저 관점에서 이 웹사이트가 유용하다고 느끼게끔 한다.

좋은 사용자 경험을 위해서는 적어도 2.5초안에 LCP가 일어나야한다.

어떻게 측정하나

LCP를 판단하는데 타겟이 되는 HTML Element는 주로 이미지, 비디오와 같은 리소스를 가진 Element와 텍스트를 갖고있는 [[Block-level Element]]이다.

웹사이트는 순차적으로 뭔가를 로딩하는 경우가 많기 때문에 웹사이트가 완전히 그려지기 전까지 시간이 가장 많이 소요되는 큰 Element 가 LCP 지표 측정의 기준이 된다.

예시1)

위 예시를 보면 헤드라인 텍스트가 그려졌을 때를 지표의 기준으로 갖고 있었지만 이미지가 로딩되자 이미지가 기준으로 바뀌었다.

하지만 이게 항상 정확하지는 않다. 아래를 보자.

인스타그램의 로고가 가장 큰 Element라서 저 시점을 기준으로 LCP 점수가 측정되었다. 하지만 보다시피 유저에게 유용한 상태는 아니다.

위는 구글 검색 결과창이다. 텍스트 Element가 나중에 로딩되는 이미지보다 큰 Block-level Element이기 때문에 LCP 측정의 기준이 되었다. 실제로도 텍스트가 이미지보다 유용한 주요 컨텐츠이므로 이미지가 로딩되지 않았더라도 사용자는 현재 보여지는 내용이 유용하다고 느낄 것이다.

개선방법

LCP를 좌지우지하는 주요 4요소:

• 리소스 로딩 시간
• render를 막는 스크립트의 실행과 CSS
• 서버 지연시간
• Client-side 렌더링

개선 방법은 아래를 참조.

• Apply instant loading with the PRPL pattern
• Optimizing the Critical Rendering Path
• Optimize your CSS
• Optimize your Images
• Optimize web Fonts
• Optimize your JavaScript (for client-rendered sites)

참조

• web.dev - lcp